<template>

  <el-form ref="form" :rules="rules" :model="ruleForm" size="mini" label-width="110px">
    <el-row type="flex" justify="flex-start" align="middle" class="flex">
      <template v-for="(title,index) in formTitles">
        <el-col v-if="title.cn==='创建时间：'" :key="index" :md="8" :xs="20" :sm="12">
          <el-form-item label="创建时间：">
            <el-col :md="11" :xs="24" :sm="24">
              <el-date-picker
                v-model="ruleForm.date1"
                type="date"
                placeholder="起始时间"
                style="width: 100%;"
              />
            </el-col>
            <el-col :lg="1" :md="1" :sm="1" :xs="0" class="line">-</el-col>
            <el-col :md="11" :xs="24" :sm="24">
              <el-time-picker
                v-model="ruleForm.date2"
                type="fixed-time"
                placeholder="结束时间"
                style="width: 100%;"/>
            </el-col>
          </el-form-item>
        </el-col>
        <el-col
          v-else-if="title.cn==='状态：'"
          :xl="3"
          :lg="4"
          :md="5"
          :xs="20"
          :sm="12"
          :key="index"
          class="check">
          <el-form-item label="状态：">
            <el-select v-model="ruleForm.status" placeholder="状态">
              <el-option label="审核中" value="1"/>
              <el-option label="未通过" value="2"/>
              <el-option label="待审核" value="3"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col v-else :key="index" :md="6" :xs="20" :sm="12">
          <el-form-item :label="title.cn" :prop="title.en">
            <el-input v-model="ruleForm[title.en]"/>
          </el-form-item>
        </el-col>
      </template>

    </el-row>
    <el-col :md="4" :sm="12" :xs="12" style="float:right">
      <el-button-group>
        <el-button type="primary" size="mini">查询</el-button>
        <el-button type="primary" size="mini">重置</el-button>
      </el-button-group>
    </el-col>
  </el-form>
</template>

<script>
export default {
  props: ['ruleForm', 'rules', 'formTitles']
}
</script>

<style>
    .check .el-input__inner {
        padding-left: 8px;
    }
</style>
<style scoped>
    .flex {
        width: 90%;
        flex-wrap: wrap;
    }
    .line {
        text-align: center;
    }
</style>
